<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加仓库</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <header>
        <h1>添加新的仓库</h1>
    </header>
    <nav>
        <ul>
            <li><a href="index.html">主页</a></li>
            <li><a href="warehouse.html">查看仓库</a></li>
            <li><a href="add-warehouse.html">添加仓库</a></li>
            <li><a href="add-item.html">添加物品</a></li>
            <li><a href="history.html">历史订单</a></li>
        </ul>
    </nav>
    <main>
        <h2>填写仓库信息</h2>
        <form>
            <div class="form-group">
                <label for="warehouseName">仓库名称:</label>
                <input type="text" id="warehouseName" name="warehouseName" required>
            </div>
            <div class="form-group">
                <label for="warehouseType">仓库类型:</label>
                <input type="number" id="warehouseType" name="warehouseType" required>
            </div>
            <div class="form-group">
                <label for="inventoryAmount">库存金额:</label>
                <input type="number" step="0.01" id="inventoryAmount" name="inventoryAmount" required>
            </div>
            <button type="submit" id="btn">提交</button>
        </form>
    </main>
    <footer>
        <p>&copy; SuperXiaoMa 仓库管理系统. 版权所有.</p>
    </footer>
    <!-- 引入 jquery -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script>
        var btn = document.querySelector("#btn");
        btn.onclick = function () {
            let formData = {
                warehouseName: document.getElementById("warehouseName").value,
                warehouseType: document.getElementById("warehouseType").value,
                inventoryAmount: document.getElementById("inventoryAmount").value,
            };
            $.ajax({
                url: "api/add-warehouse",
                type: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                data: JSON.stringify(formData),
                success: function (result) {
                    alert("新增仓库成功")
                }
            })
        }
    </script>

</body>

</html>